<template>
  <div>
    <div class="parkPictureWrap" ref="parkPictureWrap" >
      <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20" >
            <el-col :span="7">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" style="width: 38%;">
                  <el-select v-model="searchInfo.district" @change="changeDistrict(searchInfo.district)" size="mini"
                             :disabled="$store.state.userInfo.regionId?true:false" clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                <span class="searchInputFont" style="width: 38%;">
                    <el-select v-model="searchInfo.street" @change="checkstreet" size="mini" clearable placeholder="街道">
                      <el-option
                        v-for="item in streetData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                 </span>
              </div>
            </el-col>
            <el-col :span="14" >
              <span class="spanFont">类型：</span>
              <el-radio-group  size="mini" v-model="radio" @change="getMapInfo()">
                <el-radio-button v-for="(item,index) in typeList" :key="index" :label="item.value">{{item.label}}</el-radio-button>
              </el-radio-group>
            </el-col>
            <div  style="float: right;display: inline-block;">
              <el-button type="primary"  size="small" @click="getMapInfo()">查询</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="mapContentWrap">
            <mapBicycletest
                            :railInfo="railInfo"
                            :siteInfo="siteInfo"
                            :siteCount="siteCount"
                            :urgentCount="urgentCount"
                            ref="mapFun"
                            @getMapInfo="getMapInfo"
            ></mapBicycletest>

      </div>

    </div>
    </div>
  </div>

</template>

<script>
  import mapBicycletest from "./mapRack.vue"

  import bikeData from '../../../store/data'

  export default {
    props:[],
    data(){
      return {
        searchInfo: {
          areaType: "",
          district: this.$store.state.userInfo.regionId,
          street: "",
        },
        currentParking:"",
        urgentCounts:" ",
        options1:" ",
        options2:" ",
        rows:" ",
        checkList: "",
        searchUrgent: {
          state: "",
          districtId: "",
          streetId: "",
          isSite: 2,
          radio:2
        },

        railInfo:[],
        typeList: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '0',
            label: '停放区'
          },
          {
            value: '1',
            label: '禁停区'
          }, {
            value: '2',
            label: '规范停放区'
          }, {
            value: '3',
            label: '动态调节区'
          }, {
            value: '4',
            label: '临时监控区'
          }],
        siteInfo:[],
        urgentCount:"0",
        siteCount:"0",
        radio:"2",
        value1:"",
        value2:"",
        value3:"",
        value4:"",
        options1: [
          {
            value: '1',
            label: '信息来源'
          }, {
            value: '2',
            label: '平台监测'
          }, {
            value: '3',
            label: '日常巡检'
          }, {
            value: '4',
            label: '市名举报'
          }, {
            value: '5',
            label: '数字城管'
          }],
        options2: [
          {
            value: '1',
            label: '违规停放'
          }, {
            value: '2',
            label: '违法投放'
          }, {
            value: '3',
            label: '区域超量'
          }, {
            value: '4',
            label: '其它'
          } ],
        options3: [
          {
            value: '1',
            label: '未处理'
          }, {
            value: '2',
            label: '已处理'
          }],

        value: '',
        radio4: ''
      }
    },
    components: {
      mapBicycletest
    },
    created(){

//      获取首次数据
      this.getMapInfo()
    },
    destroyed(){

    },
    computed: {

    },
    methods: {
      //改变行政区 获取街道
      changeDistrict(district){
        this.getMapInfo()
        if(!district){
          this.searchInfo.street=""
          this.streetData=[]
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: district})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })

        //定到区域
        this.$store.state.districtData.forEach(item => {
          if (item.id == district && item.regionPoints) {
            this.$refs.mapFun.getBoundary(JSON.parse(item.regionPoints))
          }
        })
      },
      //改变街道
      checkstreet(){
        this.getMapInfo()
        this.streetData.forEach(item => {
          if (item.id == this.searchInfo.street && item.regionPoints) {
            this.$refs.mapFun.getBoundary(JSON.parse(item.regionPoints))
          }
        })
      },
      //     获取数据
      getMapInfo(){
        this.axios.post(process.env.API_HOST + `/facilities/selectArea`,
          {
            areaType: this.searchInfo.areaType,
            street: this.searchInfo.street,
            district: this.searchInfo.district,
          }
        )
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.railInfo = []
              this.siteInfo = []
              if (result.result.length > 0) {
                result.result.forEach((item) => {
                  if (item.areaType == 0) {  //站点
                    this.siteInfo.push(item)
                  } else if (item.areaType == 1) { //围栏
                    this.railInfo.push({
                      ...item,
                      areaPoints: item.areaPoints ? JSON.parse(item.areaPoints) : []
                    })
                  }
                })
              }
              this.colorslist.forEach(item => {
                if (item.areaType == 0) {
                  item.count = this.siteInfo.length
                } else if (item.areaType == 1) {
                  item.count = this.railInfo.length
                }
              })
            }
          })
      },

    }
  }
</script>



<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
    .parkPictureWrap
      page()
      .mapContentWrap
        position absolute;
        left 0px;
        right 0px
        bottom 0px
        top 78px
        padding: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: white;

</style>
